﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>树状菜单</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/mtree.css">
    <link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">
</head>
<body>
<div class="mtree sidebar-hook"></div>

<div class="mtree sidebar-2-hook">
    <ul style="display:block" data-level="1">
        <li><a href="javascript:;" class="mtree_link mtree-link-hook" data-url="http://www.baidu.com" title="讲评" data-id="1">
            <div class="mtree_indent mtree-indent-hook"></div>
            <div class="mtree_btn mtree-btn-hook"></div>
            <div class="mtree_name mtree-name-hook">讲评</div>
        </a></li>
        <li><a href="javascript:;" class="mtree_link mtree-link-hook" data-url="" title="布置作业" data-id="2">
            <div class="mtree_indent mtree-indent-hook"></div>
            <div class="mtree_btn mtree-btn-hook"></div>
            <div class="mtree_name mtree-name-hook">布置作业</div>
        </a>
            <ul style="display:none" data-level="2">
                <li><a href="javascript:;" class="mtree_link mtree-link-hook" data-url="" title="云习题" data-id="7">
                    <div class="mtree_indent mtree-indent-hook"></div>
                    <div class="mtree_btn mtree-btn-hook"></div>
                    <div class="mtree_name mtree-name-hook">云习题</div>
                </a></li>
                <li><a href="javascript:;" class="mtree_link mtree-link-hook" data-url="" title="自有习题" data-id="8">
                    <div class="mtree_indent mtree-indent-hook"></div>
                    <div class="mtree_btn mtree-btn-hook"></div>
                    <div class="mtree_name mtree-name-hook">自有习题</div>
                </a></li>
            </ul>
        </li>
        <li><a href="javascript:;" class="mtree_link mtree-link-hook" data-url="" title="批改作业" data-id="3">
            <div class="mtree_indent mtree-indent-hook"></div>
            <div class="mtree_btn mtree-btn-hook"></div>
            <div class="mtree_name mtree-name-hook">批改作业</div>
        </a></li>
        <li><a href="javascript:;" class="mtree_link mtree-link-hook" data-url="http://www.baidu.com" title="数据分析" data-id="4">
            <div class="mtree_indent mtree-indent-hook"></div>
            <div class="mtree_btn mtree-btn-hook"></div>
            <div class="mtree_name mtree-name-hook">数据分析</div>
        </a>
            <ul style="display:none" data-level="2">
                <li><a href="javascript:;" class="mtree_link mtree-link-hook" data-url="" title="每次作业分析" data-id="9">
                    <div class="mtree_indent mtree-indent-hook"></div>
                    <div class="mtree_btn mtree-btn-hook"></div>
                    <div class="mtree_name mtree-name-hook">每次作业分析</div>
                </a></li>
                <li><a href="javascript:;" class="mtree_link mtree-link-hook" data-url="" title="历次知识点分析" data-id="10">
                    <div class="mtree_indent mtree-indent-hook"></div>
                    <div class="mtree_btn mtree-btn-hook"></div>
                    <div class="mtree_name mtree-name-hook">历次知识点分析</div>
                </a></li>
                <li><a href="javascript:;" class="mtree_link mtree-link-hook" data-url="" title="班级成长轨迹" data-id="11">
                    <div class="mtree_indent mtree-indent-hook"></div>
                    <div class="mtree_btn mtree-btn-hook"></div>
                    <div class="mtree_name mtree-name-hook">班级成长轨迹</div>
                </a></li>
                <li><a href="javascript:;" class="mtree_link mtree-link-hook" data-url="" title="学生成长轨迹" data-id="12">
                    <div class="mtree_indent mtree-indent-hook"></div>
                    <div class="mtree_btn mtree-btn-hook"></div>
                    <div class="mtree_name mtree-name-hook">学生成长轨迹</div>
                </a></li>
                <li><a href="javascript:;" class="mtree_link mtree-link-hook" data-url="" title="作业提交及批改情况" data-id="13">
                    <div class="mtree_indent mtree-indent-hook"></div>
                    <div class="mtree_btn mtree-btn-hook"></div>
                    <div class="mtree_name mtree-name-hook">作业提交及批改情况</div>
                </a></li>
                <li><a href="javascript:;" class="mtree_link mtree-link-hook" data-url="" title="教案使用情况" data-id="14">
                    <div class="mtree_indent mtree-indent-hook"></div>
                    <div class="mtree_btn mtree-btn-hook"></div>
                    <div class="mtree_name mtree-name-hook">教案使用情况</div>
                </a></li>
                <li><a href="javascript:;" class="mtree_link mtree-link-hook" data-url="" title="讲评报告使用情况" data-id="15">
                    <div class="mtree_indent mtree-indent-hook"></div>
                    <div class="mtree_btn mtree-btn-hook"></div>
                    <div class="mtree_name mtree-name-hook">讲评报告使用情况</div>
                </a></li>
            </ul>
        </li>
        <li><a href="javascript:;" class="mtree_link mtree-link-hook" data-url="" title="我的教案" data-id="16">
            <div class="mtree_indent mtree-indent-hook"></div>
            <div class="mtree_btn mtree-btn-hook"></div>
            <div class="mtree_name mtree-name-hook">我的教案</div>
        </a></li>
        <li><a href="javascript:;" class="mtree_link mtree-link-hook" data-url="" title="班级管理" data-id="17">
            <div class="mtree_indent mtree-indent-hook"></div>
            <div class="mtree_btn mtree-btn-hook"></div>
            <div class="mtree_name mtree-name-hook">班级管理</div>
        </a></li>
        <li><a href="javascript:;" class="mtree_link mtree-link-hook" data-url="" title="购买" data-id="18">
            <div class="mtree_indent mtree-indent-hook"></div>
            <div class="mtree_btn mtree-btn-hook"></div>
            <div class="mtree_name mtree-name-hook">购买</div>
        </a>
            <ul style="display:none" data-level="2">
                <li><a href="javascript:;" class="mtree_link mtree-link-hook" data-url="" title="教案" data-id="5">
                    <div class="mtree_indent mtree-indent-hook"></div>
                    <div class="mtree_btn mtree-btn-hook"></div>
                    <div class="mtree_name mtree-name-hook">教案</div>
                </a></li>
                <li><a href="javascript:;" class="mtree_link mtree-link-hook" data-url="" title="习题集" data-id="6">
                    <div class="mtree_indent mtree-indent-hook"></div>
                    <div class="mtree_btn mtree-btn-hook"></div>
                    <div class="mtree_name mtree-name-hook">习题集</div>
                </a></li>
            </ul>
        </li>
    </ul>
</div>

<script src="../../js/jquery.min-1.11.1.js"></script>
<script src="js/mtree.js"></script>
<script>
    $(function () {
        //侧边栏开始

        //方案1，传data自动生成dom
        $('.sidebar-hook').mtree({
            openIcon: 'fa fa-caret-down',
            closeIcon: 'fa fa-caret-up',
            data: [
                {
                    'id': '1',
                    'pid': '0',
                    'name': '讲评',
                    'url': 'http://www.baidu.com',
                    'icon': 'fa fa-bookmark',
                    'expand': ''
                },
                {'id': '2', 'pid': '0', 'name': '布置作业', 'url': '', 'icon': 'fa fa-book', 'expand': ''},
                {'id': '7', 'pid': '2', 'name': '云习题', 'url': '', 'icon': '', 'expand': ''},
                {'id': '8', 'pid': '2', 'name': '自有习题', 'url': '', 'icon': '', 'expand': ''},
                {'id': '3', 'pid': '0', 'name': '批改作业', 'url': '', 'icon': 'fa fa-pencil', 'expand': ''},
                {'id': '4', 'pid': '0', 'name': '数据分析', 'url': '', 'icon': 'fa fa-cubes', 'expand': ''},
                {'id': '9', 'pid': '4', 'name': '每次作业分析', 'url': '', 'icon': '', 'expand': ''},
                {'id': '10', 'pid': '4', 'name': '历次知识点分析', 'url': '', 'icon': '', 'expand': ''},
                {'id': '11', 'pid': '4', 'name': '班级成长轨迹', 'url': '', 'icon': '', 'expand': ''},
                {'id': '12', 'pid': '4', 'name': '学生成长轨迹', 'url': '', 'icon': '', 'expand': ''},
                {'id': '13', 'pid': '4', 'name': '作业提交及批改情况', 'url': '', 'icon': '', 'expand': ''},
                {'id': '14', 'pid': '4', 'name': '教案使用情况', 'url': '', 'icon': '', 'expand': ''},
                {'id': '15', 'pid': '4', 'name': '讲评报告使用情况', 'url': '', 'icon': '', 'expand': ''},
                {'id': '16', 'pid': '0', 'name': '我的教案', 'url': '', 'icon': 'fa fa-briefcase', 'expand': ''},
                {'id': '17', 'pid': '0', 'name': '班级管理', 'url': '', 'icon': 'fa fa-users', 'expand': ''},
                {'id': '18', 'pid': '0', 'name': '购买', 'url': '', 'icon': 'fa fa-shopping-cart', 'expand': ''},
                {'id': '5', 'pid': '18', 'name': '教案', 'url': '', 'icon': '', 'expand': ''},
                {'id': '6', 'pid': '18', 'name': '习题集', 'url': '', 'icon': '', 'expand': ''}
            ],
            onClick: function (obj, url) {
                window.open(url);
            }
        });

        //方案-2 不传data，直接设置demo
        $('.sidebar-2-hook').mtree({
            openIcon: 'fa fa-caret-down',
            closeIcon: 'fa fa-caret-up',
            html: true,
            onClick: function (obj, url) {
                window.open(url);
            }
        });

        //侧边栏结束
    });
</script>

</body>
</html>